跑馬燈CSS

大致上的概念是，圖片移動跟自己寬度一樣的值之後會移動到視窗之外，此時動畫會跑下一輪，這時第二張圖片的位置又會變成第一張圖片，然後繼續移動。

廢話不多說直接進入重點，要在網頁製作出跑馬燈的效果不用太複雜用HTML與CSS的效果就可以做出來了，在此附上範例程式碼。

參考網站：http://chainan.cosmo-br.tw/ 利用css animation，嘗試重現參考網站跑馬燈效果...

CSS ; 1 .text { ; 2. position: relative; ; 3. width: 300px; ; 4. height: 24px; ; 5. margin: auto;.

網頁跑馬燈Marquee的替代方案使用css動畫達成 ... 類似Flash當中的關鍵影格，在動畫內建立各個位置的時候，對應的css樣式為何，. 最後就交給瀏覽器去做補間效果 ...

那麼我們設定同樣的動畫長度(t)，如果螢幕寬度(s) 變大速率就變快了對吧！所以讓我們再加上一些簡單的Js 來製作能夠適應各種螢幕的跑馬燈吧！

雖然HTML 中的跑馬燈已不建議用，但我們用CSS 的Animation + Transform 的TranslateX，還是可以製作出簡單的純CSS 跑馬燈動畫，今天就來教大家！

文字跑馬燈偶爾會在一些運動品牌或是潮牌看到，裝飾效果很棒又很炫， 以前也是傻傻以為要用JS寫，偵測跑完了再放下一段...... ... 發現，哇靠只要CSS的animation 就可以做到！！

簡單來說， -100% 表示滾動到容器的底部，而 var(--gap) 則表示再向下移動 gap (圖片之間)的距離，以避免圖片重疊或者間隔過大。 --scroll-end 的作用是確保 ...

這篇教學會單純使用CSS 製作文字跑馬燈效果，不僅會介紹「縮排」和「平移」兩種製作方式，還會說明例如裁切、轉換、縮排、動畫等互相搭配的控制技巧。